/**
 * @author  Xyz
 * 分公司管理-分公司详情
 */
import PDrawer from '../../../components/Pro/PDrawer';
import React from 'react';
import {
  Form,
  Input,
  Button,
  DatePicker,
  Popover,
  Icon
} from 'antd';
import moment from 'moment';
import {formItemLayout1} from './constants';
import {DrawHeader, Empty, DrawBottomBtns} from './styles';
import {OrganName} from './components';
import PCascader from '../../../components/Pro/PCascader';
import {
  RegNumber15,
  RegString50,
  RegChinese100,
  RegChineseEnglish10,
  RegPhone11,
  RegPersonNo,
  RegString20,
} from '../../../constants/regexps';
import {
  enterpriseCompanyComBaseInfoGetComBaseInfoById,
  systemComBaseInfoSaveBranch
} from '../../../services/api';

import bcx_utils from '../../../common/bcx_utils';

const FormItem = Form.Item;
@Form.create()
export default class DrawBranchCompanyDetail extends React.Component {
  constructor(props, context) {
    super(props, context);
    this.state = {
      dataSource: {
        comName: "",
        chargePerName: "",
        chargePerPhone: "",
        comCerNo: "",
        regProvince: "",
        regCity: "",
        regArea: "",
        manageProvince: "",
        manageCity: "",
        manageArea: "",
        manageAddress: "",
        recordPolice: "",
        recordDate: "",
        regAddress: "",
        idCardNo: "",
      },
      comBranchId: "",

    }
  }

  /******************************生命周期******************************/

  componentDidMount = () => {

  }

  componentWillReceiveProps = (nextProps, newState) => {
    if (!this.props.visible && nextProps.visible && nextProps.comBranchId.trim() !== "") {
      this.ajaxDetail(nextProps.comBranchId);
      this.setState({comBranchId: nextProps.comBranchId});
    }
    if (!this.props.visible && nextProps.visible && nextProps.comBranchId.trim() === "") {
      this.resetForm();
    }
  }
  /******************************ajax请求******************************/
    //重置表单
  resetForm = () => {
    const dataSource = {
      comName: "",
      chargePerName: "",
      chargePerPhone: "",
      comCerNo: "",
      regProvince: "",
      regCity: "",
      regArea: "",
      manageProvince: "",
      manageCity: "",
      manageArea: "",
      manageAddress: "",
      recordPolice: "",
      recordDate: bcx_utils.currentData(),
      comBranchId: "",
      regAddress: "",
      idCardNo: "",
    };
    this.setState({dataSource});
  }
  ajaxDetail = (comBranchId) => {
    enterpriseCompanyComBaseInfoGetComBaseInfoById({comBranchId}).then(({data = {}}) => {
      console.log("draw表单详情", data);
      const dataSource = {...this.state.dataSource};
      this.setState({dataSource: {...dataSource, ...data}});
    }, (err) => {
      console.log(err);
    });

  }

  /******************************相关事件******************************/
  handleSubmit = (e) => {
    e.preventDefault();
    this.props.form.validateFields((err, values) => {
      if (!err) {
        console.log(values);

        const ajaxParam = {...values};
        const {comBranchId} = this.state;
        const {regProvince: [r1, r2, r3], manageProvince: [m1, m2, m3], recordDate} = ajaxParam;

        ajaxParam.regProvince = r1;
        ajaxParam.regCity = r2;
        ajaxParam.regArea = r3;

        ajaxParam.manageProvince = m1;
        ajaxParam.manageCity = m2;
        ajaxParam.manageArea = m3;

        ajaxParam.recordDate = bcx_utils.formatData(ajaxParam.recordDate);

        if (comBranchId.trim() !== "") {
          ajaxParam.comBranchId = comBranchId;
        }

        console.log(ajaxParam);
        bcx_utils.preventRA(resolve => {
          this.systemComBaseInfoSaveBranch(ajaxParam, resolve);
        })
      }
    });
  }

  //保存修改
  systemComBaseInfoSaveBranch = (ajaxParam, resolve) => {
    systemComBaseInfoSaveBranch(ajaxParam).then((data) => {
      console.log("保存修改", data);
      this.props.updataTable();
      this.props.confirDrawer();
      resolve();
    }, (err) => {
      console.log(err);
      resolve();
    });
  }

  closeDrawer = () => {
    this.props.closeDrawer();
  }


  /******************************render******************************/

  render() {
    const {visible} = this.props;
    const {getFieldDecorator} = this.props.form;
    const {
      comName,
      chargePerName,
      chargePerPhone,
      comCerNo,
      manageProvince,
      manageCity,
      manageArea,
      manageAddress,
      regProvince,
      regCity,
      regArea,
      regAddress,
      recordPolice,
      recordDate,
      idCardNo,
    } = this.state.dataSource;
    return (
      <PDrawer
        title="分公司详情"
        visible={visible}
        okText="确认"
        cancelText="返回"
        onCancel={this.closeDrawer}
        onOk={this.handleSubmit}
        destroyOnClose={true}
      >
        <div>
          <Form onSubmit={this.handleSubmit} style={{width: 390, margin: "6px 0 81px 0"}}>
            <FormItem
              {...formItemLayout1}
              label="分公司名称"
              style={{marginTop: 24}}
            >
              {getFieldDecorator('comName', {
                initialValue: comName,
                rules: [RegString50, {
                  required: true, message: RegString50.message,
                }],
              })(
                <Input style={{width: 294}}/>
              )}
            </FormItem>
            <FormItem
              {...formItemLayout1}
              label="营业执照号"
              style={{marginTop: 24}}
            >
              {getFieldDecorator('comCerNo', {
                initialValue: comCerNo,
                rules: [RegNumber15, {
                  required: true, message: RegNumber15.message,
                }],
              })(
                <Input style={{width: 294}} placeholder="请输入"/>
              )}
            </FormItem>
            <FormItem
              {...formItemLayout1}
              label="注册地址"
              style={{marginTop: 24}}
            >
              {getFieldDecorator('regProvince', {
                initialValue: [regProvince, regCity, regArea],
                rules: [{
                  required: true, message: '请选择!',
                }],
              })(
                <PCascader style={{width: 294}} placeholder="请选择"/>
              )}
            </FormItem>
            <Empty>
              <FormItem
                {...formItemLayout1}
                label=""
                style={{marginTop: 24}}
              >
                {getFieldDecorator('regAddress', {
                  initialValue: regAddress,
                  rules: [RegChinese100, {
                    required: true, message: RegChinese100.message,
                  }],
                })(
                  <Input style={{width: 294}} placeholder="请填写公司注册详细地址"/>
                )}
              </FormItem>
            </Empty>

            <FormItem
              {...formItemLayout1}
              label="经营地址"
              style={{marginTop: 24}}
            >
              {getFieldDecorator('manageProvince', {
                initialValue: [manageProvince, manageCity, manageArea],
                rules: [{
                  required: true, message: '请选择',
                }],
              })(
                <PCascader style={{width: 294}} placeholder="请选择"/>
              )}
            </FormItem>
            <Empty>
              <FormItem
                {...formItemLayout1}
                label=""
                style={{marginTop: 24}}
              >
                {getFieldDecorator('manageAddress', {
                  initialValue: manageAddress,
                  rules: [RegChinese100, {
                    required: true, message: RegChinese100.message,
                  }],
                })(
                  <Input style={{width: 294}} placeholder="请填写公司注册详细地址"/>
                )}
              </FormItem>
            </Empty>
            <FormItem
              {...formItemLayout1}
              label="负责人"
              style={{marginTop: 24}}
            >
              {getFieldDecorator('chargePerName', {
                initialValue: chargePerName,
                rules: [RegChineseEnglish10, {
                  required: true, message: RegChineseEnglish10.message,
                }],
              })(
                <Input style={{width: 294}} placeholder="请输入"/>
              )}
            </FormItem>
            <FormItem
              {...formItemLayout1}
              label="负责人手机号"
              style={{marginTop: 24}}
            >
              {getFieldDecorator('chargePerPhone', {
                initialValue: chargePerPhone,
                rules: [RegPhone11, {
                  required: true, message: RegPhone11.message,
                }],
              })(
                <Input style={{width: 294}} placeholder="请输入"/>
              )}
            </FormItem>
            <FormItem
              {...formItemLayout1}
              label="负责人身份证号"
              style={{marginTop: 24}}
            >
              {getFieldDecorator('idCardNo', {
                initialValue: idCardNo,
                rules: [RegPersonNo, {
                  required: true, message: RegPersonNo.message,
                }],
              })(
                <Input style={{width: 294}} placeholder="请输入"/>
              )}
            </FormItem>
            <FormItem
              {...formItemLayout1}
              label="备案公安机关名称"
              style={{marginTop: 24}}
            >
              {getFieldDecorator('recordPolice', {
                initialValue: recordPolice,
                rules: [RegString20, {
                  required: true, message: RegString20.message,
                }],
              })(
                <Input style={{width: 294}} placeholder="请输入"/>
              )}
              <Popover content={OrganName} trigger="hover" placement="topRight">
                <div style={{color: "#D9D9D9", position: "absolute", top: "-11px", right: "-28px", width: "22px"}}>
                  <Icon type="exclamation-circle"/>
                </div>
              </Popover>
            </FormItem>
            <FormItem
              {...formItemLayout1}
              label="备案日期"
              style={{marginTop: 24}}
            >
              {getFieldDecorator('recordDate', {
                initialValue: moment(recordDate, 'YYYY-MM-DD'),
                rules: [{
                  required: true, message: 'Please input your E-mail!',
                }],
              })(
                <DatePicker style={{width: 294}}/>
              )}
            </FormItem>
          </Form>
        </div>
      </PDrawer>
    );
  }
}
